
<template>
	<button @click="open = true">Open Modal</button>


	<Teleport :disabled="!teleport" to="body">
		<div v-if="open" class="modal">
			<p>Hello from the modal!</p>
			<button @click="open = false">Close</button>
		</div>
	</Teleport>
</template>

<script setup>
import { ref } from 'vue'

defineProps({
	teleport: {
		type: Boolean,
		default: false
	}
})
const open = ref(false)
</script>

<style scoped>
.modal {
	position: fixed;
	z-index: 999;
	top: 20%;
	left: 50%;
	width: 300px;
	margin-left: -150px;
	padding: 20px;
	border: 1px solid #333;
	background: antiquewhite;
	border-radius: 4px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
</style>